<template>
  <el-card :body-style="{ padding: '8px 18px' }">
    <div class="article-header" slot="header">
      <span>最热文章</span>
    </div>
    <ul class="my-article-list">
      <li :key="a.id" v-for="a in hotArticles">
        <el-button @click="article(a.id)" type="text">{{a.artName}}</el-button>
      </li>
    </ul>
  </el-card>
</template>

<script>
export default {
  data () {
    return {}
  },
  props: {
    hotArticles: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    article (id) {
      this.$router.push({ path: `/article/${id}` })
    }
  }

}
</script>

<style>
.article-header {
  font-weight: 600;
  text-align: left;
  line-height: 20px;
}
.my-article-list {
  text-align: left;
  list-style-type: none;
}
.my-article-list li {
  line-height: 20px;
  padding: 4px;
}
.my-article-list li button {
  padding: 2px;
}
</style>
